<template>
    <div class="footer">
        <!-- 导航链接区域 -->
        <div class="footer_top">
                        <div class="footer_info1">
                            <h3>购物指南</h3>
                            <router-link to="/SizeImg" class="footer_text_link">尺码对照</router-link>
                            <router-link to="/SizeText" class="footer_text_link">尺码解读</router-link>
                        </div>
                        <!-- <div class="footer_info2">
                            <h3>交易与物流</h3>
                            <router-link to="/SizeImg" class="footer_text_link">付款方式</router-link>
                            <router-link to="/SizeImg" class="footer_text_link">运送方式</router-link>
                        </div> -->
                        <div class="footer_info3">
                            <h3>关于本站</h3>
                            <router-link to="/aboutMe" class="footer_text_link">关于我们</router-link>
                            <router-link to="/talkToUs" class="footer_text_link">联系我们</router-link>
                        </div>

                        <!-- 移动端二维码区域 -->
                        <div class="mobile_side">
                            <div class="moile_img">
                                  <img src="../../../static/img/202254.png" width="100%" height="100%">
                            </div>
                            <h2>扫描二维码可访问移动端网站</h2>
                        </div>
        </div>

        <!-- 顶部备案信息条 -->
          <div class="footer_bottom">
                       粤ICP备18132209号
          </div>
    </div>
</template>
<script>
export default {
    
}
</script>

<style>
      .footer{
          text-align: center;
          margin-top: 50px;
          width: 100%;
          height: 220px;
          box-shadow: 0 0 20px #888;
          /* padding-top: 50px; */
          box-sizing: border-box;
          background: #333;
          color: antiquewhite;
          display: flex;
          align-items: center;
          flex-direction: column;

          
          
      }
      .footer_top{
          width: 50%;
          height: 80%;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
          border-bottom: 1px dotted #7e7c7c;
      }
      .footer h3{
          color: aliceblue;
          font-size: 14px;
      }
     .footer_text_link{
           margin-top: 10px;
           text-decoration: none;
           color: #888;
           font-size: 13px;
     }
     /* 链接触碰时的效果 */
      .footer_text_link:hover{
           color: aqua;
      }
      .footer_info1{
          width: 100px;
          height: 120px;
          display: flex;
          justify-content: center;
          flex-direction: column;
          /* background-color: #888; */
          
      }
    

        .footer_info3{
          width: 100px;
          height: 120px;
          display: flex;
          justify-content: center;
          flex-direction: column;
          /* background-color: #888; */
        }
         /* 移动端二维码区域 */
         .mobile_side{
             width: 100px;
             height: 150px;
             display: flex;
             align-items: center;
             text-align: center;
             
             flex-direction: column;
             justify-content: space-around;
             font-size: 10px;
             
         }
         .mobile_img{
             width: 100px;
             height: 130px;

         }
       

        /* 顶部备案信息区域 */
        .footer_bottom{
            width: 100%;
            height: 20%;
            background: rgb(32, 32, 32);
            background: #333;
            text-align: center;
            line-height: 40px;
            color: #7e7c7c;
            font-size: 10px;
            font-family: 'SimHei';
        }
</style>
